<!-- 自定义标准图表 设置百分百宽度 通过平台组件来适配尺寸 可以替换数据以及设置高级属性自定义扩展 详细查看组件示例.txt
  注:如需设置图片存放文件夹名称需应与当前文件名一致(1并在aircim.webpack.build.component.config.js配置需要打包的文件 2.npm run lib_c 执行打包命令  最后的组件会打包在components/grids中)-->
<template>
  <div
    class="grid-box animate__animated"
    :class="dynamicClassName"
    :style="backgroundStyle"
  >
    <!-- 设置交互方法 -->
    <div class="grid-charts-wrap">
      <h2 class="h2_title" v-if="title != ''">
        <span>各生命周期办件统计</span>
      </h2>
      <div
        class="grid-charts"
        ref="chartsRef"
        @click="clickFn()"
        @dblclick="dblclickFn()"
        @mouseenter="mouseenterFn()"
        @mouseleave="mouseleaveFn()"
      ></div>
    </div>
  </div>
</template>
<script>
//引入echarts图表
import echarts from "echarts";
//引入封装方法
import encapsulation from "../../utils/aircimGird";

export default {
  //混入封装方法
  mixins: [encapsulation],
  props: {
    //图表标题
    title: {
      type: String,
      default: "",
      required: false,
    },
  },
  data() {
    return {
      //图表内容
      echartdata: {
        title: "",
        legendData: [],
        xData: ["某地区", "某地区", "某地区", "某地区", "某地区", "某地区"],
        yData: [23, 60, 320, 736, 523, 85],
      },
      //图表样式  (样式可选配 这个主要是适配平台做细微属性修改 如不需要 只保留这个 echartsConfigData对象 里面字段清空(echarts图表中正常书写颜色或者数字属性)  并且在refreshConfig分配属性的对应字段也清除或者注释)
      echartsConfigData: {
        //标题样式
        textStyle: {
          color: "#94B2CF",
          fontSize: 14,
        },
        // x显示
        xShow: true,
        // x颜色
        xColor: "#94B2CF",
        // x字体
        xWeight: "14",
        // y显示
        yShow: true,
        // y颜色
        yColor: "#94B2CF",
        // y字体
        yWeight: "14",
        // 图例显示
        legendShow: false,
        // 图例颜色
        legendColor: "#94B2CF",
        // 图例字体
        legendWeight: "14",
        // 图表底板颜色
        linerColor: "rgba(255,255,255,0)",
        // 是否隐藏底框
        hideBottomFrame: false,
        //定义线条颜色 (可忽略不用)
        chartType: "折线图-1",
        chartDataColor1: "#4BFFC0",
        //定义线条颜色 (可忽略不用)
        chartDataShadowColor1: "rgba(83, 255, 189,.3)",
        //单位
        yUnit: "件",
      },
      //监听尺寸变化
      resizeObserver: null,
      //图表实例
      mychart: null,
    };
  },
  methods: {
    myEcharts() {
      this.mychart = echarts.init(this.$refs.chartsRef);

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            label: {
              show: false,
            },
          },
          formatter: (params, i) => {
            var param = params[0];
            return `<div class="tooltip-wrap">
                                        <p>${param.name}</p>
                                        <p class="tooltip-value">
                                          <span class="tooltip-icon" style="background:${this.echartsConfigData.chartDataColor1}"></span>
                                          <em> ${param.value}</em>${this.echartsConfigData.yUnit}
                                       </p>
                                    </div>`;
          },
        },
        grid: {
          top: "33", //---------------------------------------导致两个图表不一样
          left: 10,
          right: 10,
          bottom: 15, //也可设置left和right设置距离来控制图表的大小
          containLabel: true,
        },
        // 图例
        legend: {
          data: this.echartdata.legendData,
          top: "13%",
          show: this.echartsConfigData.legendShow,
          itemWidth: 20,
          textStyle: {
            color: this.echartsConfigData.legendColor,
            fontSize: this.echartsConfigData.legendWeight,
          },
        },

        xAxis: [
          {
            data: this.echartdata.xData,
            axisLine: {
              lineStyle: {
                show: false,
              },
            },
            axisLabel: {
              show: this.echartsConfigData.xShow,
              rotate: 0,
              textStyle: {
                padding: [14, 0, 0, 0],
                fontSize: this.echartsConfigData.xWeight,
                color: this.echartsConfigData.xColor,
              },
            },
          },
        ],
        yAxis: [
          {
            name: "单位：" + this.echartsConfigData.yUnit,
            type: "value",
            max: 800,
            splitNumber: 4,
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgba(255,255,255,0.1)",
              },
            },
            axisLine: {
              show: false,
            },
            nameTextStyle: {
              color: this.echartsConfigData.yColor,
              fontSize: this.echartsConfigData.yWeight,
              padding: [0, 15, 0, 0],
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              show: this.echartsConfigData.yShow,
              textStyle: {
                color: this.echartsConfigData.yColor,
                fontSize: this.echartsConfigData.yWeight,
              },
            },
          },
        ],
        series: [
          {
            // 柱子1-头
            type: "pictorialBar",
            symbol: "image://thumbnail/common/bar-top.png",
            symbolSize: [17, 8],
            symbolOffset: [0, -9],
            symbolPosition: "end",
            data: this.echartdata.yData,
            z: 1,
          },
          {
            type: "pictorialBar",
            symbol: "image://thumbnail/common/bar.png",
            symbolSize: [17, "100%"],
            symbolMargin: 0,
            symbolOffset: [0, -5],
            symbolPosition: "end",
            data: this.echartdata.yData,
            z: 0,
          },
          {
            // 柱子1-底
            type: "pictorialBar",
            symbol: "image://thumbnail/common/bar-bom.png",
            symbolSize: [17, 5],
            symbolOffset: [0, 0],
            symbolPosition: "start",
            data: this.echartdata.yData,
            z: 1,
          },
          {
            // 高亮背景
            type: "bar",
            barWidth: 30,
            itemStyle: {
              color: "transparent",
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: "linear", // 线性渐变
                  x: 0, // 右
                  y: 0, // 下
                  x2: 0, // 左
                  y2: 1, // 上
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0, 255, 254, 0.3)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 99, 255, 0.15)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 区域透明度，缺省为 false
                },
                borderColor: {
                  type: "linear", // 线性渐变
                  x: 0, // 右
                  y: 0, // 下
                  x2: 0, // 左
                  y2: 1, // 上
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0, 253, 251, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 253, 251, 0)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 区域透明度，缺省为 false
                },
              },
            },
            data: this.echartdata.yData,
          },
        ],
      };
      this.mychart.setOption(option);
      this.mychart.resize();
    },

    //最后如果需要上传可视化能力平台 填写的图表内容 以及 图表样式 应如
    //图表内容: {"echartdata":{"title":"课时统计TEST","legendData":["课时"],"yData":[23,60,20,36,23,85],"xData":["2019-01 ","2019-02 ","2019-03 ","2019-04 ","2019-05 ","2019-06"]}}
    //图表样式: {"xShow":true,"xColor":"#fff","xWeight":24,"yShow":true,"yColor":"#fff","yWeight":24,"legendShow":true,"legendColor":"#fff","legendWeight":18,"chartType":"折线图-1","chartDataColor1":"#A9F387","textStyle":{"color":"#fff","fontSize":32},"linerColor":"rgba(255,255,255,0)","hideBottomFrame":false}

    // 刷新数据源
    refreshData(val) {
      this.echartdata = val.echartdata;
    },
    // 初始化
    initGrid() {
      this.myEcharts();
    },
    // 样式修改方法
    refreshConfig(val) {
      const {
        xShow,
        yShow,
        legendShow,
        xColor,
        yColor,
        legendColor,
        legendWeight,
        xWeight,
        yWeight,
        chartDataColor1,
        textStyle,
        linerColor,
        hideBottomFrame,
      } = val;
      this.echartsConfigData.xShow = xShow;
      this.echartsConfigData.yShow = yShow;
      this.echartsConfigData.legendShow = legendShow;
      this.echartsConfigData.xColor = xColor;
      this.echartsConfigData.yColor = yColor;
      this.echartsConfigData.legendColor = legendColor;
      this.echartsConfigData.legendWeight = legendWeight;
      this.echartsConfigData.xWeight = xWeight;
      this.echartsConfigData.yWeight = yWeight;
      this.echartsConfigData.chartDataColor1 = chartDataColor1;

      this.echartsConfigData.textStyle = textStyle;
      this.echartsConfigData.linerColor = linerColor;
      this.echartsConfigData.hideBottomFrame = hideBottomFrame;
    },

    // 监听盒子变化
    listenChangeFn() {
      // 添加 resize 事件监听器
      // 获取目标 div 元素
      const targetDiv = this.$refs.chartsRef;

      // 创建 ResizeObserver 实例
      this.resizeObserver = new ResizeObserver((entries) => {
        // 当目标 div 大小发生变化时，触发回调函数
        for (const entry of entries) {
          const { width, height } = entry.contentRect;
          this.mychart.resize(); //图表自适应方法
        }
      });

      // 监听目标 div 元素
      this.resizeObserver.observe(targetDiv);
    },
  },
  computed: {
    //设置套系边框(根据主题切换底色边框样式) 以及设置图表背景颜色
    backgroundStyle() {
      const { hideBottomFrame, linerColor } = this.echartsConfigData;
      let styleObject = {
        "background-color": linerColor,
        padding: "0!important",
      };
      // 如果 hideBottomFrame 不为 true，则添加 background-image
      if (!hideBottomFrame) {
        styleObject["background-image"] = "none";
      }
      return styleObject;
    },
  },
  mounted() {
    this.myEcharts(); //图表初始化
    this.listenChangeFn(); //监听盒子变化
  },
  // 销毁监听
  beforeDestroy() {
    // 组件销毁前停止监听
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
    if (this.requestTime != null) {
      clearInterval(this.requestTime);
    }
  },
};
</script>
<style lang="scss" scoped>
@import "../../static/assets/common.scss";
</style>
<style lang="scss" scoped>
.grid-box {
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .grid-charts-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .grid-charts {
    width: 100%;
    height: 100%;
    flex: 1;
  }
}
.h2_title {
  margin-bottom: 15px;
  flex-shrink: 0;
}
</style>
<style lang="scss">
.tooltip-wrap {
  em {
    padding-right: 3px;
    font-size: 24px;
    font-style: normal;
    font-family: D-DIN;
  }

  .tooltip-value {
    margin-top: 6px;
    display: flex;
    align-items: center;
  }

  .tooltip-icon {
    margin-right: 5px;
    width: 11px;
    height: 11px;
    border-radius: 100%;
  }
}
</style>
